<!--
<template>
  <a-drawer
    title="修改子商品"
    :maskClosable="false"
    width=1150
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="editVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">

      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="子商品信息" key="1">
      <a-row :gutter="24">

        <a-col :span="8">
          <a-form-item label='子供应商' v-bind="formItemLayout">
            <a-input v-decorator="['mab02']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='子供应商型号' v-bind="formItemLayout">
            <a-input v-decorator="['mab03']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='名称' v-bind="formItemLayout">
            <a-input v-decorator="['name']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="颜色" v-bind="formItemLayout">
            <a-input v-decorator="['mab05']" style="width: 100%"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='尺码' v-bind="formItemLayout">
            <a-input v-decorator="['mab06']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='净重' v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab09']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label='颜色英文' v-bind="formItemLayout">
            <a-input v-decorator="['mab07']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="尺码英文" v-bind="formItemLayout">
            <a-input v-decorator="['mab08']" style="width: 100%"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='毛重' v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab10']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="进价" v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab11']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='售价' v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab13']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='商品条码' v-bind="formItemLayout">
            <a-input v-decorator="['mab15']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label='进价(含税)' v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab12']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="售价(含税)" v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab14']" style="width: 100%"/>
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item label='体积' v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab16']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="长" v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab17']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='宽' v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab18']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='高' v-bind="formItemLayout">
            <a-input-number :min="1"  type="number" v-decorator="['mab19']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
          <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="产品状态" v-bind="formItemLayout">
              <a-select
                style="width: 100%"
                v-decorator="['mabacti']">
                <a-select-option  value="Y">上架</a-select-option>
                <a-select-option  value="N">下架</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          </a-row>
        </a-tab-pane>

        <a-tab-pane tab="图片与视频" key="2" forceRender>
          <a-form-item label='产品主图' v-bind="formItemLayout">
            <a-upload
              :action="actionUrl"
              listType="picture-card"
              :fileList="fileListM"
              @preview="handlePreviewM"
              @change="handleChangeM"
              :headers="headers">
              <div v-if="fileListM.length < 1">
                <a-icon type="plus"/>
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisibleM" :footer="null" @cancel="handleCancelM">
              <img alt="example" style="width: 100%" :src="previewImageM"/>
            </a-modal>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>

    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
import db from 'utils/localstorage'
import GlobalVariable from '../../common/global_variable'

const formItemLayout = {
  // eslint-disable-next-line standard/object-curly-even-spacing
  labelCol: { span: 6},
  wrapperCol: { span: 18 }
}
let user = db.get('USER')
let username = user.username
export default {
  name: 'MabFileEdit',
  props: {
    editVisiable: {
      default: false
    },
    fileListM: {
      default: []
    }
  },
  data () {
    return {
      actionUrl: GlobalVariable.preRequest + 'file/uploadQCloud',
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      maaData: [],
      mabFile: {},
      headers: {
        Authentication: db.get('USER_TOKEN')
      },
      // 主图初始化
      previewVisibleM: false,
      previewImageM: '',
      // 主图初始化结束
      fileKeyStr: '',
      exitfileKeyStr: ''

    }
  },
  methods: {
    reset () {
      this.loading = false
      this.form.resetFields()
    },
    onClose () {
      if (this.exitfileKeyStr === this.fileKeyStr) {
      } else {
        this.handleFileSubmit()
      }
      this.reset()
      this.$emit('close')
    },
    setFormValues ({...mabFile}) {
      let fields = ['mab00', 'mab01', 'mab02', 'mab03', 'mab04', 'mab05', 'mab06', 'mab07', 'mab08', 'mab09', 'mab10', 'mab11', 'mab12', 'mab13', 'mab14', 'mab15', 'mab16', 'mab17', 'mab18', 'mab19', '', 'mab20', 'mabacti', 'name']
      Object.keys(mabFile).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key)
          let obj = {}
          obj[key] = mabFile[key]
          this.form.setFieldsValue(obj)
        }
      })
      this.fileKeyStr = mabFile.mab04
      this.mabFile.mab04 = mabFile.mab04
      this.mabFile.mab00 = mabFile.mab00
      this.exitfileKeyStr = this.mabFile.mab04
    },
    // 主图上传相关开始
    handleCancelM () {
      this.previewVisibleM = false
    },
    handlePreviewM (file) {
      this.previewImageM = file.url || file.thumbUrl
      this.previewVisibleM = true
    },
    handleChangeM (info) {
      this.fileListM = info.fileList
      var file = info.file
      let code = ''
      if (file.hasOwnProperty('response')) {
        code = file.response.message
      }
      let fileKey = file.name
      fileKey = (fileKey.indexOf('/' + username + '/') !== -1 ? (file.name) : ('/' + username + '/' + file.name))
      if (file.status === 'removed') {
        // 20002文件已存在 20001系统异常
        if (code === '20002' || code === '20001') {
        } else {
          this.$api.goods.deleteFile(fileKey).then((r) => {
            this.fileKeyStr = this.fileKeyStr.replace(fileKey, '')
          })
        }
        this.mabFile.mab04 = ''
      } else if (file.status === 'done') {
        this.mabFile.mab04 = fileKey
        this.fileKeyStr = fileKey
      } else if (file.status === 'error') {
        if (code === '20002') {
          this.$message.error('文件已存在,请更换后再试')
        } else if (code === '20001') {
          this.$message.error('系统繁忙,请稍后再试')
        }
      }
    },
    // 主图上传相关结束

    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          let mabFile = this.form.getFieldsValue()
          mabFile.mab00 = this.mabFile.mab00
          mabFile.mab04 = this.mabFile.mab04
          this.$api.goods.putMab('mabFile', {
            ...mabFile
          }).then(() => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    handleFileSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          let mabFile = this.form.getFieldsValue()
          mabFile.mab00 = this.mabFile.mab00
          mabFile.mab04 = this.mabFile.mab04
          this.$put('mabFile', {
            ...mabFile
          }).then(() => {
            this.reset()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  },
  watch: {
    editVisiable () {
      if (this.editVisiable) {
        this.$get('maa').then((r) => {
          this.maaData = r.data.rows
        })
      }
    }
  }
}
</script>
-->
